<template id="center">
    <div>
        <div class="center_f">
        <div class="center_top">
            <div class="center_phone">
                <div class="center_left">
                   
					<div class="img_r showimg">
						<img v-bind:src="userinfo.img ? userinfo.img : img" alt="">
						<input type="file" class="files"  @change="getFile($event)">
						<input type="hidden" v-model="source" >
					</div>
                </div>
                <div class="center_right">
                    <p v-if="is_name" class="name" >{{userinfo.user_name}}</p>
                    <p v-else class="login" @click="back_login()" >登录/注册</p>
					<span v-if="tips.status == 1">
					 <router-link :to="tips.url" >{{tips.name}}</router-link>
					</span>
                </div>

            </div>
            <ul class="center_ul">
                <li>
                    <span>可查看</span><span>积分</span><span>{{userinfo.points}}</span>
                </li>
                <li @click="getCoupon()">
                    <span>可使用</span><span>优惠券</span><span>{{userinfo.coupon}}</span>

                </li>
				<!--
                <li>
                    <span>可查看</span><span>发票</span><span>0</span>
                </li>
				-->
                <li @click="getIdea()">
                    <span>提意见</span><span>意见箱</span><span>{{userinfo.feedback}}</span>
                </li>
            </ul>
        </div>
         <p class="center_order">
             <router-link to="/myorder">
             <img src="../image/di.jpg" alt="">
             <img src="../image/dy.jpg" alt="">
             <span>我的订单</span>
             <span>全部订单</span>
             </router-link>
         </p>
        <div class="center_lis">
            <dl @click="getPayment()">
                <dt><img src="../image/kuan.png" alt=""></dt>
                <dd>待付款</dd>
				<span  v-if="userinfo.unpaid > 0">{{userinfo.unpaid}}</span>
            </dl>
            <dl @click="getGoods()">
                <dt><img src="../image/che.png" alt=""></dt>
                <dd>待发货</dd>
				<span  v-if="userinfo.pending > 0">{{userinfo.pending}}</span>
            </dl>
            <dl @click="getReceipt()">
                <dt><img src="../image/p.png" alt=""></dt>
                <dd>待收货</dd>
				<span  v-if="userinfo.received > 0">{{userinfo.received}}</span>
            </dl>
            <dl @click="getEvaluate()">
                <dt><img src="../image/xin.png" alt=""></dt>
                <dd>待评价</dd>
				<span  v-if="userinfo.comment > 0">{{userinfo.comment}}</span>
            </dl>
        </div>
        <p class="center_border"></p>
        <p class="center_first" @click="share()">
            <img src="../image/li.jpg" alt="">
            <img src="../image/dy.jpg" alt="">
            <span>邀请礼</span>
            <span>去领好礼</span>
        </p>
        <p class="center_second" @click="Service()">
            <img src="../image/fu.jpg" alt="">
            <img src="../image/dy.jpg" alt="">
            <span>售后服务</span>
        </p>
        <p class="center_third" @click="help()">
            <img src="../image/deng.jpg" alt="">
            <img src="../image/dy.jpg" alt="">
            <span>帮助中心</span>
        </p>
        <p class="center_third" @click="person_center()">
            <img src="../image/girl.jpg" alt="">
            <img src="../image/dy.jpg" alt="">
            <span>在线客服</span>
        </p>
        <p class="center_footer"></p>
        </div>
        <v-footer></v-footer>
        <div class='wan' @click="idea_hide()">感谢您的宝贵意见~ </div>
    </div>
</template>
<script>
    import footer from './footer.vue';

    export default{
       name: 'center',
       components:{
           'v-footer':footer
       },
	   data(){
            return{
                userinfo:'',
                is_name:false,
                tips: { status: '1',name: '签到有好礼', url: '#'   },
    		    img:require("../image/ma.jpg"),
				source:'center',
            }
       },
	   filters: {
			is_img: function (value) {
				return value ? value : this.img;
			}
       },
	   mounted:function(){

            //感谢提醒
			var pack = this.$route.query.pack;
		    if(pack == 'idea'){
				var idea = this.GLOBAL.getCookie('idea');
				if(!idea){
					$('.wan').show();
					$('.wan').fadeOut(3000);
					this.GLOBAL.setCookie('idea',1,3);
				}
			}				
			
            //初始化
            this.get_info();

        },
        methods:{
	       /*个人中心资料修改*/
            person_center:function(){
                this.$router.push('/personCenter')
            },
            Service:function(){
                this.$router.push('/customerService')
            },
            getIdea:function(){
                this.$router.push('/idea')
            },
            help:function(){
                this.$router.push('/help')
            },
			share:function(){
				this.$router.push('/shareLi')
			},
			idea_hide:function(){
				$('.wan').fadeOut("slow");
			},
			getPayment:function(){
				this.$router.push('/myorder/payment')
			},
			getGoods:function(){
				this.$router.push('/myorder/goods')
			},
			getReceipt:function(){
				this.$router.push('/myorder/receipt')
			},
			getEvaluate:function(){
				this.$router.push('/myorder/evaluate')
			},
            getCoupon:function(){
			    this.$router.push('/Coupon')
            },
			getFile(event) {
				this.file = event.target.files[0];
				
                let form = {"image":this.file,"source":this.source}				
				let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);

				this.$ajax.post(url, Data).then((res) => {
					if(res.data.code == 200){

						this.userinfo.img = res.data.data;
						this.img = res.data.data;
						this.headimg(res.data.data);

					}else{
						alert(res.data.msg);		
					}       
				}).catch((err) => {
					console.log(err);
				})

			},
            get_info(){

                //初始化个人信息
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=main';
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.userinfo = temp.data;
                        this.tips   =   temp.data.tips
                        this.is_name =  true;
                    }else{
                        console.log(temp.msg);        
                    }                 
                 })

            },
			headimg(img){

				//编辑头像
				let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=headimg&headimg='+img;
                let Data = this.GLOBAL.dataParam();

				this.$ajax.post(url,Data).then(function(res){
                    let temp = res.data;
                    if(temp.code != 200){
						alert(temp.msg);		
					}                 
				 })
                
			},
            back_login(){
               this.GLOBAL.back_login(this);
            }
			
        }
    };

</script>
<style>
    .center_f{
        overflow-x: hidden;
    }
 .showimg{
	 position: relative;
     width:1.11rem;
     height: 1.09rem;
     display:block;
	}
.showimg .files {
		position: absolute;
		font-family: Arial;
		width: 1.02rem;
		height: 1.09rem;
		cursor: pointer;
		background-color: #999999;
		opacity: 0;
		z-index: 3;
		left: 0;
		top: 0px;
	}	
    .login{
        height: 0.36rem;
        width: 2.37rem;
        line-height: 0.36rem;
        text-align: center;
        color: #2e2e2e;
        font-size: 0.26rem;
        margin-top: 6px;
    }
	.wan{
		display:none;
		height: 1rem;
		width: 3.2rem;
		background: #adabab;
		position: fixed;
		top: 30%;
		left: 25%;
		line-height: 1rem;
		text-align: center;
		color: #fff;
		font-size: 0.24rem;
		border-radius:0.05rem;
	}
    .center_order a{
        display:block;
        text-decoration:none;
    }
    .center_footer{
        height:1.92rem;
        width:100%;
        background:#f5f4f2;
        box-shadow: 0 0.03rem 0.04rem #bdbdbb;
    }
    .center_first,.center_second,.center_third{
        width:100%;
        height:0.8rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    .center_first img:nth-of-type(1){
        width:0.26rem;
        height:0.3rem;
        position:absolute;
        left:0.32rem;
        top:0.25rem;
    }
    .center_second img:nth-of-type(1){
         width:0.26rem;
         height:0.3rem;
         position:absolute;
         left:0.32rem;
         top:0.24rem;
     }
    .center_first img:nth-of-type(2){
         width:0.16rem;
         height:0.28rem;
         position:absolute;
         right:0.26rem;
         top:0.24rem;
     }
    .center_third img:nth-of-type(1){
        width:0.26rem;
        height:0.3rem;
        position:absolute;
        left:0.32rem;
        top:0.22rem;
    }
    .center_third img:nth-of-type(2){
        width:0.16rem;
        height:0.28rem;
        position:absolute;
        right:0.26rem;
        top:0.24rem;
    }
    .center_second img:nth-of-type(2){
        width:0.16rem;
        height:0.28rem;
        position:absolute;
        right:0.26rem;
        top:0.24rem;
    }
    .center_third span:nth-of-type(1){
        width:2.24rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_second span:nth-of-type(1){
        width:2.24rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_first span:nth-of-type(1){
        width:2.06rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_first span:nth-of-type(2){
        width:1.79rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#d4d4d4;
        font-size:0.24rem;
        float:right;
    }
    .center_border{
        height:0.09rem;
        width:100%;
        background:#f5f4f2;
    }
    .center_lis{
        width:100%;
        height:1.44rem;
        display:flex;

    }
    .center_lis dl{
        flex:1;

        position:relative;
    }
	.center_lis dl:nth-of-type(1) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.85rem;
        top: 0.3rem;
    }
    .center_lis dl:nth-of-type(2) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.85rem;
        top: 0.3rem;
    }
    .center_lis dl:nth-of-type(3) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.85rem;
        top: 0.3rem;
    }
	.center_lis dl:nth-of-type(4) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.85rem;
        top: 0.3rem;
    }
    .center_lis dl dd{
        height:0.33rem;
        line-height:0.33rem;
        text-align:center;
        color:#7a7979;
        font-size:0.19rem;
        position:absolute;
        left:0.45rem;
        top:0.9rem;

    }
    .center_lis dl dt{
        height:0.47rem;
        display:block;
        position:relative;
    }
    .center_lis dl dt img{
        height:0.47rem;
        position:absolute;
        top:0.35rem;
        left:0.5rem;
    }
    .center_order{
        height:0.8rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    .center_order span:nth-of-type(1){
        height:0.8rem;
        width:2.24rem;
        line-height:0.8rem;
        text-align:center;
        color:#000000;
        font-size:0.24rem;
        float:left;
    }
    .center_order img:nth-of-type(1){
        display:block;
        height:0.36rem;
        width:0.3rem;
        position:absolute;
        top: 0.22rem;
        left:0.3rem;
    }
    .center_order img:nth-of-type(2){
        display:block;
        height:0.28rem;
        width:0.16rem;
        position:absolute;
        top: 0.18rem;
        right:0.2rem;
    }
    .center_order span:nth-of-type(2){
        width:1.79rem;
        height:0.69rem;
        line-height:0.69rem;
        text-align:center;
        color:#b5b5b5;
        font-size:0.22rem;
        float:right;

    }
    .center_ul{
        height:1.75rem;
        width:100%;
        display:flex;

    }
    .center_ul li{
        list-style:none;
        flex:1;
        height:1.73rem;
        width:1.6rem;
        float:left;
        position:relative;
    }
     .center_ul li span:nth-of-type(1){
         position:absolute;
         height:0.25rem;
         width:0.7rem;
         line-height:0.25rem;
         text-align:center;
         color:#ffffff;
         font-size:0.16rem;
         background:#fe7d02;
         top:0.45rem;
         left:0.77rem;
         border-radius:0.1rem;
     }
    .center_ul li span:nth-of-type(2){
        position:absolute;
        width:1.6rem;
        height:0.45rem;
        line-height:0.45rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        font-weight:700;
        left:0.3rem;
        top:0.7rem;
    }
    .center_ul li span:nth-of-type(3){
        height:0.2rem;
        width:1.6rem;
        line-height:0.2rem;
        text-align:center;
        color:#fe7d02;
        font-size:0.2rem;
        left:0.3rem;
        position:absolute;
        top:1.13rem;
    }
    .center_right span{
        position:absolute;
        width:1.27rem;
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#ffffff;
        background:#fe7d02;
        border-radius:0.1rem;
        font-size:0.2rem;
        top:0.6rem;
        left:0.6rem;
    }
	.center_right span a{
		text-decoration:none;
        color:#ffffff;
     }
    .center_right .name{
        height:0.36rem;
        width:2.37rem;
        line-height:0.36rem;
        text-align:center;
        color:#2e2e2e;
        font-size:0.22rem;

    }
    .center_right{
        float:right;
        height:1.03rem;
        width:2.37rem;
        position:relative;
    }
    .center_left{
        height:1.03rem;
        width:1.03rem;
        float:left;
    }
    .center_left img{
        display:block;
        height:1.03rem;
        width:1.03rem;
    }
    .center_phone{
        height:1.04rem;
        width:3.41rem;
        position:absolute;
        top:0.54rem;
        left:0.32rem;
    }
    .center_top{
        width:100%;
        height:1.74rem;
        padding-top:1.58rem;
        background:url(../image/center.png) no-repeat;
        background-size:cover;
        position:relative;
    }

</style>